/* Please ❤ this if you like it! */


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

.login_and_register{
  width:400px;
  height:400px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #c4c3ca;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  display:none;
  font-weight:bold;

  z-index:5;
}

.login_and_register .card_title{
  font-size:25px;
  position:absolute;
  top:30px;
  left:170px;
}

.login_and_register  .logins, .login_and_register .registers {
  width: 100%;
  height: 100%;
  background-color: #2a2b38;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 300%;
  position: absolute;
  border-radius: 6px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;

  position:absolute;
  top:0;
  left:0;
}

/* 信息框 */
.login_and_register .username_msg,.login_and_register .password_msg,.login_and_register .repassword_msg{
  position:absolute;
  left:60px;
  display: block;
  width:70%;
}
.login_and_register .username_msg{  top:100px;}
.login_and_register .password_msg{  top:170px;}
.login_and_register .repassword_msg{top:240px;}
/* input 样式*/
.login_and_register .form_style {
  /*padding: 13px 20px;*/
  padding-left: 55px;
  height: 40px;
  width: 100%;
  font-weight: 500;
  border-radius: 4px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.5px;
  outline: none;
  color: #c4c3ca;
  background-color: #1f2029;
  border: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}

/* 输入信时 */
.login_and_register  .form_style:focus,.login_and_register  .form_style:active {
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}

.login_and_register .input-icon {
  position: absolute;
  top: -4px;
  left: 16px;
  height: 46px;
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  color: #ffeba7;
  transition: all 200ms linear;
}

/* 登录按钮、注册按钮样式 */
.login_and_register .login_a,.login_and_register .register_a{
  display:block;
  width:100px;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  text-align:center;
  vertical-align: center;
  border: none;
  background-color: #ffeba7;
  color: #102770;
  box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);

  position:absolute;
  left:145px;
}
.login_and_register .login_a{     top:250px;}
.login_and_register .register_a{  top:300px;}

.login_and_register .login_a:hover,.login_and_register .register_a:hover{
  background-color: #102770;
  color: #ffeba7;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}

/* 忘记密码 */
.login_and_register .link {
  display: block;
  position:absolute;
  right:10px;
  bottom:4px;
  color: #c4c3ca;
}
.login_and_register .register_link{
  left:10px;
  bottom:4px;
}
.login_and_register .link:hover {
  color: #ffeba7;
}